<template>
	<div class="dingYue">
		<div class="center align-start fWrap">
			<div class="right">
				<div class="bfff biao">
					<div class="center title">
						<div class="flex f14 c333 flex">知识标签</div>
						<v-select-tags v-model="tagsList" :isShow="false" :tagIf="false" :selectd="false">
							<template #tags="{ onOpenDialog }">
								<img src="@/assets/image/geRen/fen.png" class="fen_icon" @click="onOpenDialog" alt="" />
							</template>
						</v-select-tags>
					</div>
					<el-table ref="multipleTableRef" :data="tagList" @select="selectClick" @select-all="selectClickAll">
						<el-table-column align="center" type="selection" min-width="5%" />
						<el-table-column prop="name" show-overflow-tooltip min-width="30%" label="全选" />
					</el-table>
				</div>
			</div>
			<div class="right-768" @click="drawer = true">知识标签</div>
			<el-drawer v-model="drawer" size="60%" :with-header="false">
				<div class="right rights">
					<div class="bfff biao">
						<div class="center title">
							<div class="flex f14 c333 flex">知识标签</div>
							<v-select-tags v-model="tagsList" :isShow="false" :tagIf="false">
								<template #tags="{ onOpenDialog }">
									<img
										src="@/assets/image/geRen/fen.png"
										class="fen_icon"
										@click="onOpenDialog"
										alt=""
									/>
								</template>
							</v-select-tags>
						</div>
						<el-table
							ref="multipleTableRef"
							:data="tagList"
							@select="selectClick"
							@select-all="selectClickAll"
						>
							<el-table-column align="center" type="selection" min-width="5%" />
							<el-table-column prop="name" show-overflow-tooltip min-width="30%" label="全选" />
						</el-table>
					</div>
				</div>
			</el-drawer>
			<div class="left flex">
				<div class="bfff left-bottom">
					<div class="center flex-start fWrap table-head">
						<div class="c666 f14 timi-dis">发布时间：</div>
						<div>
							<el-date-picker
								value-format="YYYY-MM-DD 00:00:00"
								v-model="times"
								type="date"
								placeholder="请选择日期"
								:disabled-date="pickerOptions"
							></el-date-picker>
						</div>
						<div class="c666 f14">标题：</div>
						<div>
							<el-input
								type="text"
								v-model="titleName"
								placeholder="请输入标题..."
								@keyup.enter.native="onSearch"
							/>
						</div>
						<el-button class="primary" type="primary" @click="onSearch">搜索</el-button>
						<el-button type="primary" plain @click="resetting">重置</el-button>
					</div>
					<div class="left-top-content">
						<div class="center row disNo">
							<div class="label f14 c333">已选条件:</div>
							<div class="flex center fWrap flex-start">
								<div v-if="divideList.length > 0">
									<el-tag
										class="choice-tag"
										closable
										round
										effect="light"
										@close="delLists(index)"
										v-for="(item, index) in divideNames"
										:key="index"
									>
										<div v-if="item.stName">{{ item.stName }}</div>
										<div v-else>{{ item.name }}</div></el-tag
									>
									<el-button type="primary" link @click="delList" v-if="divideList.length > 0"
										>清空筛选</el-button
									>
								</div>
							</div>
						</div>
						<div class="center row nav">
							<div class="label f14 c333">所属目录:</div>
							<div class="flex center flex-start fen-ax">
								<div
									:class="item.id == active ? 'ctheme' : ''"
									class="c666 f14 hover"
									@click="divides(item, index)"
									v-for="(item, index) in divide"
									:key="item.id"
								>
									{{ item.name }}
								</div>
							</div>
							<el-switch v-model="switchValue" active-text="多选" class="disNo" />
						</div>
						<div class="center row nav" v-if="children && children.length">
							<div class="label f14 c333">所属分类:</div>
							<div class="flex center flex-start fen-ax">
								<div
									:class="isActive(item) ? 'ctheme' : ''"
									@click="dividess(item)"
									class="c666 f14 hover"
									v-for="(item, index) in children"
									:key="item.id"
								>
									{{ item.name }}
								</div>
							</div>
						</div>
					</div>
					<div>
						<div>
							<el-table @cell-click="cellClick" :data="tableData" style="width: 100%">
								<el-table-column
									prop="title"
									align="center"
									label="标题"
									show-overflow-tooltip
									min-width="200"
								>
									<template #default="{ row }">
										<el-button link type="primary" @click="cellClick(row)">{{
											row.title
										}}</el-button>
									</template>
								</el-table-column>
								<el-table-column
									prop="ctName"
									align="center"
									label="分类"
									show-overflow-tooltip
									min-width="200"
								/>
								<el-table-column prop="createUser" align="center" label="作者" min-width="200" />
								<el-table-column
									prop="pubTime"
									align="center"
									label="发布日期"
									show-overflow-tooltip
									min-width="200"
								>
									<template #default="{ row }">
										<div>{{ time(row.pubTime) }}</div>
									</template>
								</el-table-column>
								<el-table-column align="center" prop="readCount" label="浏览量" min-width="200" />
								<template #empty>
									<el-empty description="暂无数据" />
								</template>
							</el-table>
						</div>
					</div>
					<div class="bfff paginationClass">
						<v-pagination
							:total="+total"
							:size="pageSize"
							:page="current"
							@pagination="fetchList"
							@paginations="fetchLists"
						></v-pagination>
					</div>
				</div>
			</div>
		</div>
		<!-- 新建蒙层 -->
		<el-dialog v-model="visible" :show-close="false" :close-on-click-modal="false" destroy-on-close>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<img src="@/assets/image/zhuTi/xin.png" alt="" />
					<div class="flex f33 fbold">选择知识分类</div>
					<el-icon class="pointer" size="20" color="#fff" @click="close">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="dialog-content">
				<el-tree
					:default-checked-keys="[9, 10]"
					ref="treeRef"
					:data="data"
					show-checkbox
					default-expand-all
					node-key="id"
					highlight-current
					:props="defaultProps"
				/>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="visible = false">取消</el-button>
					<el-button type="primary" @click="router.push('/knowledgeCreation')"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { nextTick } from "vue"
import { Search, RefreshRight } from "@element-plus/icons-vue"
import vSelectTags from "/packages/v-select-tags/index.vue"
import { ElMessage, ElMessageBox } from "element-plus"
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const visible = ref(false)
const active = ref("")
const children = ref([])
const multipleTableRef = ref()
// 添加标签
const tagsList = ref([])
//标签列表
const tagList = ref([])
//选中的标签
const tagsListStr = ref([])
const pageSize = ref(10)
//多选
const switchValue = ref(false)
const checked = ref([])
const tableData = ref([])
const activeName = ref("first")
const times = ref("")
const drawer = ref(false)
const titleName = ref("")
//高级展开
let divideList = ref([])
const divideNames = computed(() => divideList.value.map(item => item))
const setShowMore = () => {
	visible.value = !visible.value
}
const total = ref(0)
const current = ref(1)
const divide = ref([])
async function created() {
	const res = await getAxios(`/knowledge/kbSubjectWarehouse/findByListToCategory`)
	if (res && res.length) {
		divide.value = res
		divide.value.unshift({
			id: "",
			name: "不限",
		})
	} else {
		divide.value = []
	}
	const ress = await getAxios("/knowledge/kbUserLabel/findLabelByUser")
	if (ress && ress.length) {
		tagsList.value = ress
		tagList.value = ress
		tagsListStr.value = [ress[0]]
		if (ress && ress.length) {
			const resStr = await getAxios(`/knowledge/kbUserLabel/selectBasicByLabel`, {
				current: 1,
				size: 10,
				labelIds: ress[0].id,
				categoryIds: "",
				swIds: "",
				fromTime: times.value,
				title: titleName.value,
			})
			total.value = +resStr.total
			tableData.value = resStr.records
			multipleTableRef.value.toggleRowSelection(ress[0], true)
		}
	}
}
created()

const cellClick = row => {
	router.push(`/knowledgeDetails?swId=${row.swId}&id=${row.id}`)
}
//分类
const divides = (item, index) => {
	if (tagsListStr.value && tagsListStr.value.length) {
		active.value = item.id
		if (item.children && item.children.length) {
			children.value = item.children
			if (children.value[0].name != "不限") {
				children.value.unshift({
					id: item.id,
					name: "不限",
					stName: item.name + "/" + "不限",
				})
			}
			if (!switchValue.value) {
				checked.value = []
				divideList.value = []
			}
			if (item.name == "不限") {
				children.value = []
				divideList.value = []
				created()
			}
			dividess(children.value[0])
		} else {
			children.value = []
			children.value.unshift({
				id: item.id,
				name: "不限",
				stName: item.name + "/" + "不限",
			})
			tableData.value = []
			dividess(children.value[0])
		}
	} else {
		ElMessage.error("请先添加知识标签")
	}
}
// 目录高亮
function isActive(item) {
	return !!~checked.value.findIndex(check => check.id == item.id)
}
const dividess = async item => {
	if (tagsListStr.value && tagsListStr.value.length) {
		if (switchValue.value) {
			if (isActive(item)) {
				const index = checked.value.findIndex(check => check.id == item.id)
				checked.value = checked.value.filter(check => check.id != item.id)
				divideList.value.splice(index, 1)
			} else {
				checked.value.push(item)
				divideList.value.push(item)
			}
		} else {
			checked.value = checked.value.filter(check => check.id != item.id)
			checked.value = []
			divideList.value = []
			checked.value.push(item)
			divideList.value.push(item)
		}
		const idlist = []
		divideList.value.forEach(item => {
			if (!item.stName) {
				idlist.push(item.id)
			}
		})
		const idlists = []
		tagsListStr.value.forEach(item => {
			idlists.push(item.id)
		})
		const swIdList = []
		divideList.value.forEach(item => {
			if (item.stName) {
				swIdList.push(item.id)
			}
		})
		const res = await getAxios(`/knowledge/kbUserLabel/selectBasicByLabel`, {
			current: 1,
			size: 10,
			swIds: swIdList.join(),
			labelIds: idlists.join(),
			categoryIds: idlist.join(),
		})
		total.value = res.total
		tableData.value = res.records
		if (divideList.value.length == 0) {
			empty()
		}
	} else {
		ElMessage.error("请先添加知识标签")
	}
}
const delList = async () => {
	checked.value = []
	children.value = []
	divideList.value = []
	const idlists = []
	tagsListStr.value.forEach(item => {
		idlists.push(item.id)
	})
	const { records } = await getAxios(`/knowledge/kbUserLabel/selectBasicByLabel?current=1&size=10`, {
		labelIds: idlists.join(),
	})
	tableData.value = records
	// created()
}
watch(switchValue, () => {
	if (!switchValue.value) {
		checked.value = []
		divideList.value = []
	}
})
watch(activeName, () => {
	divideList.value = []
})
watch(
	tagsList,
	async (a, b) => {
		if (a.length == 0 || b.length == 0) {
			return
		}
		let tagAll = []
		tagList.value = tagsList.value
		if (tagsList.value.length) {
			tagsList.value.forEach(item => {
				tagAll.push(item.id)
			})
			await postAxios("/knowledge/kbUserLabel/save", tagAll)
			const ress = await getAxios("/knowledge/kbUserLabel/findLabelByUser")
			tagList.value = ress
			tagsListStr.value = [ress[0]]
			if (ress && ress.length) {
				const resStr = await getAxios(`/knowledge/kbUserLabel/selectBasicByLabel`, {
					current: 1,
					size: 10,
					labelIds: ress[0].id,
					categoryIds: "",
					swIds: "",
					fromTime: times.value,
					title: titleName.value,
				})
				total.value = +resStr.total
				tableData.value = resStr.records
				multipleTableRef.value.toggleRowSelection(ress[0], true)
			}
		}
	},
	{
		immediate: false,
	}
)

//选中标签
const selectClick = async row => {
	let zancun = tagsListStr.value
	tagsListStr.value = row
	if (tagsListStr.value && tagsListStr.value.length == 0) {
		tagsListStr.value = zancun
		multipleTableRef.value.toggleRowSelection(zancun[0], true)
		return ElMessage.error("最少保留一个标签")
	}
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})

	const idlists = []
	tagsListStr.value.forEach(item => {
		idlists.push(item.id)
	})
	const res = await getAxios(`/knowledge/kbUserLabel/selectBasicByLabel?current=1&size=10`, {
		labelIds: idlists.join(),
		categoryIds: idlist.join(),
		swIds: swIdList.join(),
		fromTime: times.value,
		title: titleName.value,
	})
	total.value = +res.total
	tableData.value = res.records
}
const selectClickAll = async row => {
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})
	tagsListStr.value = row
	const idlists = []
	tagsListStr.value.forEach(item => {
		idlists.push(item.id)
	})
	if (idlists.length) {
		const res = await getAxios(`/knowledge/kbUserLabel/selectBasicByLabel?current=1&size=10`, {
			labelIds: idlists.join(),
			categoryIds: idlist.join(),
			fromTime: times.value,
			swIds: swIdList.join(),
			title: titleName.value,
		})
		total.value = +res.total
		tableData.value = res.records
	} else {
		ElMessage.error("请至少勾选一个标签")
	}
}
function time(times) {
	return times.substring(0, 10)
}
const resetting = async () => {
	times.value = ""
	titleName.value = ""
	checked.value = []
	children.value = []
	divideList.value = []
	const idlists = []
	tagsListStr.value.forEach(item => {
		idlists.push(item.id)
	})
	const res = await getAxios(`/knowledge/kbUserLabel/selectBasicByLabel`, {
		current: 1,
		size: 10,
		labelIds: idlists.join(),
		categoryIds: "",
		swIds: "",
		fromTime: times.value,
		title: titleName.value,
	})
	total.value = +res.total
	tableData.value = res.records
	current.value = "1"
}
const onSearch = async () => {
	if (tagsListStr.value && tagsListStr.value.length) {
		const idlist = []
		divideList.value.forEach(item => {
			if (!item.stName) {
				idlist.push(item.id)
			}
		})
		const swIdList = []
		divideList.value.forEach(item => {
			if (item.stName) {
				swIdList.push(item.id)
			}
		})
		const idlists = []
		if (tagsListStr.value && tagsListStr.value.length) {
			tagsListStr.value.forEach(item => {
				idlists.push(item.id)
			})
		}
		const res = await getAxios(`/knowledge/kbUserLabel/selectBasicByLabel`, {
			current: 1,
			size: 10,
			labelIds: idlists.join(),
			categoryIds: idlist.join(),
			swIds: swIdList.join(),
			fromTime: times.value,
			title: titleName.value,
		})
		total.value = +res.total
		tableData.value = res.records
		current.value = "1"
	} else {
		ElMessage.error("请先添加知识标签")
	}
}
const fetchList = async val => {
	current.value = val
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})
	const idlists = []
	tagsListStr.value.forEach(item => {
		idlists.push(item.id)
	})
	const res = await getAxios(`/knowledge/kbUserLabel/selectBasicByLabel`, {
		current: current.value,
		size: pageSize.value,
		labelIds: idlists.join(),
		swIds: swIdList.join(),
		categoryIds: idlist.join(),
	})
	total.value = res.total
	tableData.value = res.records
}
const fetchLists = async val => {
	pageSize.value = val
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})
	const idlists = []
	tagsListStr.value.forEach(item => {
		idlists.push(item.id)
	})
	const res = await getAxios(`/knowledge/kbUserLabel/selectBasicByLabel`, {
		current: current.value,
		size: pageSize.value,
		labelIds: idlists.join(),
		swIds: swIdList.join(),
		categoryIds: idlist.join(),
	})
	total.value = res.total
	tableData.value = res.records
}
//清空
const delLists = index => {
	divideList.value.splice(index, 1)
	checked.value.splice(index, 1)
	if (divideList.value.length == 0) {
		active.value = 0
		empty()
		created()
	}
}
function empty() {
	checked.value = []
	times.value = ""
	titleName.value = ""
	divideList.value = []
}
function pickerOptions(time) {
	return time.getTime() > Date.now()
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.dingYue {
	background-color: #f8f8f8;
	height: 100%;
	overflow-y: scroll;
	.left-top-content {
		padding: 10px 15px;
		border: 1px solid #eceef5;
		margin: 20px 0 30px;

		.nav {
			.c666 {
				margin-right: 10px;
			}
			:deep(.el-switch) {
				margin-left: 20px;
			}
		}

		:deep(.el-tag__close) {
			background-color: #2972fa;
			color: #fff;
		}
		.choice-tag {
			height: 25px;
			line-height: 1;
			background: #f4faff;
			border: 1px solid #2972fa;
			border-radius: 15px;
			padding: 0 10px;
			color: #2972fa;
			font-size: 12px;
			margin-right: 10px;
			@include maxWidth(768) {
				margin-bottom: 1vh;
			}
		}
		.row {
			border-bottom: 1px dashed #eceef5;
			padding: 15px 0;
		}

		.label {
			width: 100px;
			@include maxWidth(1400) {
				width: 90px;
			}
			@include maxWidth(768) {
				width: 80px;
			}
			@include maxWidth(500) {
				width: 70px;
			}
		}
	}
	.right {
		width: 200px;
		margin: 20px;
		@include maxWidth(768) {
			display: none;
		}
		:deep(.el-input) {
			width: 100%;
		}
		.fen_icon {
			width: 20px;
		}

		.title {
			border-bottom: 1px solid #dcdfe6;
			padding: 10px 20px;
		}
	}
	.rights {
		@include maxWidth(768) {
			display: block;
		}
	}
	.right-768 {
		display: none;
		position: fixed;
		left: 0;
		top: 100;
		width: 30px;
		padding: 10px;
		background-color: #2972fa;
		color: #fff;
		border-radius: 3px;
		@include maxWidth(768) {
			display: block;
		}
	}

	.left-bottom {
		padding: 25px;

		.table-head {
			height: 50px;

			:deep(.el-input) {
				border-radius: 3px;
				margin-right: 10px;
			}

			.primary {
				margin-left: 20px;
				@include maxWidth(500) {
					margin-left: 0;
				}
			}

			.danger {
				color: #ff952c;
			}
		}

		:deep(.el-table) {
			border: 1px solid #eceef5;
			cursor: pointer;
		}
		:deep(.el-table__row) {
			&:hover {
				.title-hover {
					color: #2971ff;
				}
			}
		}
		:deep(.el-table th.el-table__cell) {
			background-color: #f4f7fa;
		}

		:deep(.el-table .el-table__cell) {
			color: #606266;
		}
	}
}
.paginationClass {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
:deep(.el-date-editor.el-input) {
	width: 200px;
	@include maxWidth(1400) {
		width: 150px;
	}
	@include maxWidth(1024) {
		width: 100px;
	}
	@include maxWidth(768) {
		width: 150px;
	}
	@include maxWidth(650) {
		display: none;
	}
}
.timi-dis {
	@include maxWidth(650) {
		display: none;
	}
}
:deep(.el-input) {
	width: 200px;
	@include maxWidth(1400) {
		width: 150px;
	}
	@include maxWidth(1024) {
		width: 120px;
	}
	@include maxWidth(900) {
		width: 100px;
	}
	@include maxWidth(768) {
		width: 150px;
	}
	@include maxWidth(500) {
		width: 120px;
	}
}
.fen-ax {
	white-space: nowrap;
	width: 100%;
	overflow-x: scroll;
}
.disNo {
	@include maxWidth(768) {
		display: none;
	}
}
</style>
